<template>
  <!--display-苞米检查-->
  <div class="corn-inspection">
    <div class="module-title">
      保密检查情况柱状图（全队）
      <button
        class="info-btn"
        @mouseenter="showTooltip"
        @mouseleave="hideTooltip">
        <i class="el-icon-reading"></i>
      </button>
      <!-- 悬停提示框 -->
      <div
        v-show="tooltipVisible"
        class="tooltip-box"
        :style="tooltipStyle">
        {{ securityInfoText }}
      </div>
    </div>
    <div class="semester-range">本学期：20250214-当日</div>
    <div class="chart-container" ref="chartContainer"></div>
    <div v-if="loading" class="loading">加载中...</div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'CornInspection',
  data() {
    return {
      chart: null,
      loading: false,
      categories: [],
      counts: [],
      // 提示框相关
      tooltipVisible: false,
      securityInfoText: '',
      tooltipStyle: {
        position: 'absolute',
        top: '35px',
        left: '280px',
        zIndex: 1000
      }
    };
  },
  mounted() {
    this.loadData();
    this.loadSecurityInfoText();
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
    if (this.chart) {
      this.chart.dispose();
    }
  },
  methods: {
    async loadData() {
      this.loading = true;
      try {
        const response = await this.$displayapi.getSecurity();
        if (!response || !response.data || !response.data[0]) {
          throw new Error('API返回数据格式错误');
        }
        // 适配后端字段
        const data = response.data[0];
        this.categories = [
          '违规建群',
          '相册',
          '热点',
          '违纪',
          '翻墙',
          '其他'
        ];
        this.counts = [
          Number(data.chatCount) || 0,
          Number(data.photoalbumCount) || 0,
          Number(data.hotissueCount) || 0,
          Number(data.badrecordCount) || 0,
          Number(data.climbingrecordCount) || 0,
          Number(data.otherCount) || 0
        ];
        this.$nextTick(() => {
          this.initChart();
        });
      } catch (error) {
        console.error('加载苞米检查数据失败:', error);
        this.$message.error('加载苞米检查数据失败');
      } finally {
        this.loading = false;
      }
    },
    initChart() {
      const chartContainer = this.$refs.chartContainer;
      if (!chartContainer) return;
      if (this.chart) this.chart.dispose();
      this.chart = echarts.init(chartContainer);
      const option = {
        title: {
          text: '',
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: '40px',
          left: '5%',
          right: '5%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.categories,
          axisLabel: {
            color: '#d3d6dd',
            fontSize: 16
          }
        },
        yAxis: {
          type: 'value',
          name: '人数',
          axisLabel: {
            color: '#d3d6dd',
            fontSize: 16
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(104, 216, 254, 0.1)'
            }
          }
        },
        series: [
          {
            name: '人数',
            type: 'bar',
            barWidth: '50%',
            data: this.counts,
            itemStyle: {
              color: '#4992ff',
              borderRadius: [5, 5, 0, 0]
            },
            label: {
              show: true,
              position: 'top',
              color: '#d3d6dd',
              fontSize: 16
            }
          }
        ]
      };
      this.chart.setOption(option);
    },
    handleResize() {
      if (this.chart) {
        this.chart.resize();
      }
    },

    // 加载保密检查说明文本
    async loadSecurityInfoText() {
      try {
        const response = await fetch('/tltl.txt');
        if (response.ok) {
          const text = await response.text();
          // 提取"6、"后面的文本，直到下一个序号或文件结束
          const regex = /6、(.*?)(?=\s*\d+、|$)/s;
          const match = text.match(regex);
          if (match && match[1]) {
            this.securityInfoText = match[1].trim();
            console.log('保密检查说明文本:', this.securityInfoText);
          } else {
            console.error('未找到保密检查说明文本');
            this.securityInfoText = '第一百八十二条  军队单位应当根据工作情况，进行保密教育和保密检查，发现问题及时报告并严肃处理。第二百四十四条  军队单位使用国际互联网，应当按照规定履行审批手续，做到专机入网、专室放置、专盘存储、专人管理；使用中，应当落实上网登记、终端管理、安全防护、保密检查、技术服务等制度。';
          }
        } else {
          console.error('加载保密检查说明文本失败');
          this.securityInfoText = '第一百八十二条  军队单位应当根据工作情况，进行保密教育和保密检查，发现问题及时报告并严肃处理。第二百四十四条  军队单位使用国际互联网，应当按照规定履行审批手续，做到专机入网、专室放置、专盘存储、专人管理；使用中，应当落实上网登记、终端管理、安全防护、保密检查、技术服务等制度。';
        }
      } catch (error) {
        console.error('加载保密检查说明文本出错:', error);
        this.securityInfoText = '第一百八十二条  军队单位应当根据工作情况，进行保密教育和保密检查，发现问题及时报告并严肃处理。第二百四十四条  军队单位使用国际互联网，应当按照规定履行审批手续，做到专机入网、专室放置、专盘存储、专人管理；使用中，应当落实上网登记、终端管理、安全防护、保密检查、技术服务等制度。';
      }
    },

    // 显示提示框
    showTooltip() {
      this.tooltipVisible = true;
    },

    // 隐藏提示框
    hideTooltip() {
      this.tooltipVisible = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.corn-inspection {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;
  box-sizing: border-box;
  position: relative;

  .module-title {
    font-size: 22px;
    color: #68d8fe;
    margin-bottom: 5px;
    font-weight: bold;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;

    .info-btn {
      background: rgba(104, 216, 254, 0.2);
      border: 1px solid rgba(104, 216, 254, 0.5);
      border-radius: 4px;
      color: #68d8fe;
      cursor: pointer;
      padding: 4px 8px;
      font-size: 16px;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;

      &:hover {
        background: rgba(104, 216, 254, 0.3);
        border-color: rgba(104, 216, 254, 0.8);
        color: #ffffff;
        transform: scale(1.05);
      }

      i {
        font-size: 14px;
      }
    }

    .tooltip-box {
      background: rgba(19, 25, 47, 0.95);
      border: 1px solid rgba(104, 216, 254, 0.5);
      border-radius: 6px;
      padding: 12px 16px;
      color: #d3d6dd;
      font-size: 18px;
      line-height: 1.6;
      max-width: 400px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(10px);
      word-wrap: break-word;
      white-space: normal;

      &::before {
        content: '';
        position: absolute;
        top: -6px;
        left: 20px;
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid rgba(104, 216, 254, 0.5);
      }

      &::after {
        content: '';
        position: absolute;
        top: -5px;
        left: 21px;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid rgba(19, 25, 47, 0.95);
      }
    }
  }
  .semester-range {
    font-size: 18px;
    color: #d3d6dd;
    margin-bottom: 10px;
  }
  .chart-container {
    flex: 1;
    width: 100%;
    min-height: 400px;
  }
  .loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #d3d6dd;
    font-size: 16px;
  }
}
</style>
